<template>
	<view class="material-item">
		<view class="material-item-col" >
			<text class="material-item-col-text">{{ item.custom_identification ? item.custom_identification : item.identification }}</text>
		</view>
		<view class="material-item-col" >
			<text class="material-item-col-text">{{ item.capacity }}</text>
		</view>
		<view class="material-item-col" >
			<text class="material-item-col-text">{{ item.packing_count ? item.packing_count:''}}</text>
		</view>
		<view class="material-item-col" >
			<view class="number-box" v-if="!isWeightCabinet && item.select">
				<view class="number-box-item" @click="minusNum(item, index)">-</view>
				<input class="number-box-inp" type="number" v-model="item.now_num" @input="numberInput($event, item, index)" />
				<view class="number-box-item" @click="addNum(item, index)">+</view>
			</view>
			<text class="material-item-col-text" v-else>{{ item.now_num }}</text>
		</view>

		
		<view class="material-item-col" >
			<view class="material-item-col-select" v-if="isWeightCabinet && batchSupplementStatus"><uni-icons type="checkmarkempty" size="14" v-if="item.select"></uni-icons></view>
			<view class="material-item-col-btn fill" @click="fillNum(item, index)" v-else-if="!isWeightCabinet && batchSupplementStatus">一键补满</view>
			<view class="material-item-col-btn" @click="showInfo(item, index)" v-else-if="!isWeightCabinet && !batchSupplementStatus">补料</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'select-cabinet-item',
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		index: {
			type: Number,
			default: ''
		},
		isWeightCabinet: {
			type: Boolean,
			default: false //是否是称重柜
		},
		batchSupplementStatus: {
			type: Boolean,
			default: false //是否正在批量补料
		},
		materialBoxNum:{
			type: Number,
			default: 0
		},
		isPeel:{
			type: Boolean,
			default: false //是否正在批量补料
		}
	},
	data() {
		return {
			numberInputTimer: null //库存输入框输入定时器
		};
	},
	mounted() {},
	methods: {
		minusNum(item, index) {
			if (item.now_num > item.old_num) {
				item.now_num--;
			} else {
				uni.showToast({
					title: '补料操作数量不能少于原来的数量',
					icon: 'none'
				});
			}
		},
		addNum(item, index) {
			console.log('添加数量', item, index);
			if (item.now_num < item.capacity) {
				item.now_num++;
				// 如果是实体柜子需要执行开锁操作
			} else {
				uni.showToast({
					title: '超出货道容量',
					icon: 'none'
				});
			}
		},
		numberInput($event, item, index) {
			// console.log('输入数量==', $event, item, index);
			if (this.numberInputTimer) {
				clearTimeout(this.numberInputTimer);
				this.numberInputTimer = null;
			}
			this.numberInputTimer = setTimeout(() => {
				if ($event.detail.value > item.capacity) {
					// console.log('大于最大数量');
					item.now_num = item.capacity;
				} else {
					// console.log('小于原始数量');
					if ($event.detail.value < item.old_num) {
						item.now_num = item.old_num;
					}
				}
			}, 300);
		},
		// 一键补满
		fillNum(item, index) {
			console.log('一键补满==', item);
			item.now_num = item.capacity;
			// TODO 需要对货道进行开锁
		},
		showInfo(item, index) {
			this.$emit('showInfo', item, index);
		}
	},
	destroyed() {
		// console.log('组件销毁');
	}
};
</script>

<style lang="scss">
/* 列表项容器 */
/* 列表项容器 - 使用flex平均分配宽度 */
.material-item {
  display: flex;
  width: 100%;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;
}

/* 列通用样式 - 平均分配宽度 */
.material-item-col {
  flex: 1; /* 关键属性：平均分配剩余空间 */
  min-width: 0; /* 允许内容收缩 */
  text-align: center;
  padding: 0 10rpx;
  box-sizing: border-box;
}

/* 文本内容样式 */
.material-item-col-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 数字输入框容器 */
.number-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 数字加减按钮 */
.number-box-item {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 4rpx;
  font-size: 30rpx;
  color: #666;
}

/* 数字输入框 */
.number-box-inp {
  width: 80rpx;
  height: 50rpx;
  margin: 0 10rpx;
  text-align: center;
  border: 1rpx solid #e5e5e5;
  border-radius: 4rpx;
  font-size: 26rpx;
}

/* 操作按钮基础样式 */
.material-item-col-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  color: #fff;
  background-color: #333847;
  border-radius: 30rpx;
  line-height: 1.4;
  white-space: nowrap;
}

/* 父容器设置 */
.page-main {
  width: 100%;
  overflow: hidden;
}

/* 表头同步调整 */
.material-head {
  display: flex;
  width: 100%;
  background-color: #f5f6f7;
  padding: 20rpx 0;
}

.material-head-col {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
